
import * as Cesium from "cesium";

import GrayTexturePath from '@/assets/gray-texture-512.jpg';

// import { CustomHeightmapTerrainProvider } from './CustomHeightmap';
import { GetImages } from '../scripts/ToolFunctions/getImgFromUrl';

import UVMapperTexture from '@/assets/uv_grid_opengl.jpg';

import texture1 from '@/tmp_set_img/HYD_2024_7_1_4_0_0_temperture.png';
import texture2 from '@/tmp_set_img/HYD_2024_7_2_4_0_0_temperture.png';
import texture3 from '@/tmp_set_img/HYD_2024_7_3_4_0_0_temperture.png';
import texture4 from '@/tmp_set_img/HYD_2024_7_4_4_0_0_temperture.png';
import texture5 from '@/tmp_set_img/HYD_2024_7_5_4_0_0_temperture.png';


let west = 113.216742;
let south = 29.706212;
let east = 113.480030;
let north = 29.954927;
const imgBounds = Cesium.Rectangle.fromDegrees(west, south, east, north);//西 南 东 北




export async function CreateRectGeometryInstance(viewer: Cesium.Viewer, west: number, south: number, east: number, north: number): Promise<Cesium.GeometryInstance> {
    return new Promise((resolve, reject) => {
        // 获取矩形四个角的位置
        var southwest = Cesium.Cartographic.fromDegrees(west, south);
        var northwest = Cesium.Cartographic.fromDegrees(west, north);
        var northeast = Cesium.Cartographic.fromDegrees(east, north);
        var southeast = Cesium.Cartographic.fromDegrees(east, south);

        // 使用 sampleTerrainMostDetailed 来获取这些位置处的地形高度
        Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, [southwest, northwest, northeast, southeast])
            .then(function(updatedPositions) {
                try {
                    // 更新矩形的几何体，使其考虑地形高度
                    var updatedRectangleOptions = {
                        rectangle: Cesium.Rectangle.fromDegrees(west, south, east, north),
                        heights: updatedPositions.map(function(cartographic) {
                            return cartographic.height;
                        }),
                        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
                    };

                    var updatedGeometry = new Cesium.RectangleGeometry(updatedRectangleOptions);
                    var updatedInstance = new Cesium.GeometryInstance({
                        geometry: updatedGeometry,
                        id: 'myRectangle'
                    });

                    resolve(updatedInstance); // 成功时解析为 GeometryInstance
                } catch (error) {
                    reject(error); // 处理并拒绝错误
                }
            })
            .catch(function(error) {
                reject(error); // 捕获并拒绝来自 sampleTerrainMostDetailed 的任何错误
            });
    });
}



// 舍弃的内容
export function LoadDEMMain(viewer:Cesium.Viewer){
    console.log("LoadDEMMain Function run ...");



// INFO:测试地形拉伸效果--存在问题
// const longitude1 = 114.220449;
// const latitude1 = 30.324020;
// const longitude2 = 114.500714;
// const  latitude2 = 30.723765;

// const bounds = Cesium.Rectangle.fromDegrees(longitude1, latitude1, longitude2, latitude2);//西 南 东 北

// // 假设你已经加载了图片并获取到图像数据
// let image = new Image();

// // 定义一个标志变量，用于跟踪图片是否加载完成
// let isLoaded = false;

// image.onload = () => {
//     isLoaded = true;
//     console.log('Image has been loaded successfully.');
//     // console.log("image onload:",image);


//     const canvas = document.createElement('canvas');
//     const context = canvas.getContext('2d');

//     canvas.width = image.width;
//     canvas.height = image.height;
//     console.log(`width:${image.width},height:${image.height}`);//测试图gray_texture 512*512

//     // 测试图有效数据情况
//     const width = 4;
//     const height = 4;

//     context.drawImage(image, 0, 0);

//     // 获取图像数据
//     const imageData = context.getImageData(0, 0, image.width, image.height);
//     const data = imageData.data;

//     // console.log("imageData:", data);//测试灰度图 512*512*4

// // // INFO:测试读取高程灰度图创建HeightMap来修改地形。
// // // 存在问题，无法创建出TerrainProvider来提供给viewer作为地形进行加载

// // // 读取灰度值并转换为高程值（假设灰度值已经在(0-1)范围）
// // const elevations = [];

// // // // 控制读出来的只有5个点,用于查看数据
// // // for(let i = 0;i < 5; i++){
// // //     for(let j = 0;j < 5;j++){
// // //         const grayValue = data[(i*100+50 + j*100+50)*4 ] / 255.0;//取R的值，还原到范围0-1之间
// // //         const elevation = grayValue * 50; // 将灰度值恢复为高程
// // //         // console.log('elvation:',elevation);
// // //         elevations.push(elevation);
// // //     }
// // // }
// // // // 查看解析出来的高程数据情况
// // // console.log("elevations:", elevations);

// // for (let i = 0; i < data.length; i += 4) {
// //     // 获取R通道的灰度值（假设图像是灰度图）
// //     const grayValue = data[i] / 255;
// //     const elevation = grayValue * 500; // 将灰度值恢复为高程
// //     elevations.push(elevation);
// // }
// // console.log("elevations:", elevations);//理论上应是512*512



// // // 加载了灰度图像并得到高程数据
// // const imageWidth = image.width;
// // const imageHeight = image.height;
// // const heightmapData = new Uint16Array(imageWidth * imageHeight);  // 使用Uint16Array储存高度值

// // // 将图像灰度数据转换为高度数据，假设灰度值范围是 0-1 高程值范围是 0-50
// // for (let i = 0; i < imageHeight; i++) {
// //   for (let j = 0; j < imageWidth; j++) {
// //     const pixelIndex = i * imageWidth + j;

// //     const elevation = elevations[pixelIndex];  // 从图像中提取的高程值
// //     heightmapData[pixelIndex] = Math.min(65535, Math.max(0, elevation * 1000));  // 将高程缩放到 0 - 65535 范围内

// //   }
// // }
// // console.log("heightmapData:", heightmapData);//512*512



// // // FIXME:采用自定义高程依旧存在问题
// // const terrainProvider = new CustomHeightmapTerrainProvider(
// //     heightmapData, // 你的高程数据
// //     imageWidth,
// //     imageHeight,
// //     bounds
// // );

// // viewer.terrainProvider = terrainProvider;



// // // INFO:测试读取灰度图作为高程，修改地形顶点高程情况

// // // FIXME:通过Shader后渲染控制效果
// //     const grayTexture = new Cesium.Texture({
// //         context: viewer.scene.context,
// //         source: {
// //             // uri: new URL('@/assets/gray-texture-512.jpg', import.meta.url).href
// //             uri: GrayTexturePath
// //         },
// //     });


// // const customTerrainShader = `
// // uniform sampler2D grayTexture;
// // uniform vec2 imageDimensions;
// // uniform vec4 bounds;  // 左上角(x1, y1)和右下角(x2, y2)

// // vec2 worldToTexture(vec2 position) {
// //     float u = (position.x - bounds.x) / (bounds.z - bounds.x);
// //     float v = (position.y - bounds.y) / (bounds.w - bounds.y);
// //     return vec2(u, v);
// // }

// // float getHeightFromTexture(vec2 texCoord) {
// //     return texture2D(grayTexture, texCoord).r * 50.0; // 假设灰度范围是0-1，对应高程是0-50米
// // }

// // // TOOD:需检查计算 diffuse 部分
// // czm_material czm_getMaterial(czm_materialInput materialInput) {
// //     czm_material material = czm_getDefaultMaterial(materialInput);
// //     vec2 texCoord = worldToTexture(materialInput.st);
// //     float heightOffset = getHeightFromTexture(texCoord);
// //     material.diffuse = vec3(heightOffset / 50.0); // 用颜色显示高程（调试用）
// //     return material;
// // }
// // `;

// // // 创建材质
// // const material = new Cesium.Material({
// //   fabric: {
// //     type: 'CustomTerrain',
// //     uniforms: {
// //       grayTexture: grayTexture,
// //       imageDimensions: new Cesium.Cartesian2(image.width, image.height),
// //       bounds: new Cesium.Cartesian4(longitude1, latitude1, longitude2, latitude2), // 替换为实际范围
// //     },
// //     source: customTerrainShader,
// //   },
// // });
// // console.log("material:", material);

// // viewer.scene.globe.material = material;
// }//img.onload()

// // 设置 Image 对象的 error 事件处理程序
// image.onerror = (error) => {
//     console.error('The image could not be loaded.', error);
// };

// image.src = GrayTexturePath;//'@/assets/gray-texture-512.jpg';

// // 如果你需要立即知道加载状态，可以在设置 src 后立即检查 isLoaded 标志
// // 注意：这种检查方式不能保证100%准确，因为异步加载可能几乎立刻完成
// // 更好的方法是依赖 onload 和 onerror 事件处理程序
// console.log('Is the image loaded?', isLoaded ? 'Yes' : 'No');



// FIXME:添加3d表面
// const polygon3d = viewer.entities.add({
//     polygon: {
//         hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
//             longitude1, latitude1, -500,
//             longitude1+0.1, latitude1, -600,
//             longitude1+0.1, latitude1+0.1, -700,
//             longitude1, latitude1+0.1, -550
//         ]),
//         material: Cesium.Color.GREEN.withAlpha(0.5),
//         extrudedHeight: 0
//     }
// });



// // 添加矩形到Viewer中--用于测试
// const rectangle = new Cesium.Entity({
//     name : '矩形',
//     rectangle : {
//       coordinates : Cesium.Rectangle.fromDegrees(west+1, south,east + 1, north),
//       material : Cesium.Color.RED.withAlpha(0.5),
//       outline : true,
//       outlineColor : Cesium.Color.BLACK,
//       // 面的z值的高度
//       height : 200,
//     }
// });
// viewer.entities.add(rectangle);




viewer.entities.add({
    name : '湖泊范围矩形',
    rectangle : {
        coordinates : imgBounds,
        // 设置矩形颜色及透明度
        // material : Cesium.Color.GREEN.withAlpha(0.5), 
        material: new Cesium.ImageMaterialProperty({
            // image: UVMapperTexture,
            color: Cesium.Color.BLUE.withAlpha(0.5),
            // repeat: new Cesium.Cartesian2(16, 16),//默认1*1
            transparent: true
        }),
        // 是否绘制矩形轮廓
        outline : true, 
        // 设置轮廓颜色
        outlineColor : Cesium.Color.RED, 
        outlineWidth : 20, 
        // 不设置z值，默认贴地，但是会无法显示边框
        // height : 5000
    }
});




}


export async function LoadDEMMain2(viewer:Cesium.Viewer){
    const rectangleGraphic = new Cesium.RectangleGraphics({
        coordinates : imgBounds,
        material:Cesium.Color.BLUE.withAlpha(0.5), 
        // material: new Cesium.ImageMaterialProperty({
        //     image: UVMapperTexture,
        //     transparent: true
        // }),
        // 是否绘制矩形轮廓
        outline : true, 
        // 设置轮廓颜色
        outlineColor : Cesium.Color.RED, 
        outlineWidth : 20, 
        // 不设置z值，默认贴地，但是会无法显示边框
        // height : 5000
    });

    let rectangleEntity = viewer.entities.add({
        name:"洪湖范围矩形",
        rectangle:rectangleGraphic
    });

// let geometryInstance = CreateRectGeometryInstance(viewer,west,south,east,north);
// console.log("geometryInstance :",geometryInstance);
    // TODO:研究加载贴地的Primitive对象，避免纹理图切换时闪烁
// let rectPrimitive = viewer.scene.primitives.add(
//     new Cesium.Primitive({
//     geometryInstances: imgBounds,
//     appearance: new Cesium.EllipsoidSurfaceAppearance({
//         aboveGround: false,
//         material:new Cesium.Material({
//         fabric: {
//             type: "Image",
//             uniforms: {
//             image: UVMapperTexture,
//             },
//         },
//         })
//     }),

//     }),
// );


    // 替换为自己的温度图片纹理地址
const baseUrl = "http://127.0.0.1:8081/";

let currentImageIndex = 0; // 当前显示的图片索引
let currentImageUrl = ""; // 当前显示的图片 URL
let switchInterval: number | undefined; // 定时器 ID
let imageUrls: string[] = []; // 确保imageUrls是一个数组类型

// 本地图片
let imgTextures = [
    texture1,texture2,texture3,texture4,texture5
];

async function initializeImages() {
    try {
        imageUrls = await GetImages(baseUrl);
        console.log("imageUrls:", imageUrls);

        if (imageUrls.length > 0) {
            // 初始化第一张图片
            currentImageUrl = imageUrls[currentImageIndex];
            // console.log("Switching to first image URL:", currentImageUrl);

            // currentImageUrl = imgTextures[currentImageIndex];

            // FIXME:使用Entity更换Material存在闪烁问题
            SwitchTextureFromImgURL(currentImageUrl, rectangleEntity);
            // SwitchPtimitiveImgFromImgURL(currentImageUrl,rectPrimitive);

            // 开始轮换
            startSwitchingImages();
        } else {
            console.error("No images available for switching.");
        }
    } catch (error) {
        console.error("Error fetching images:", error);
    }
}

// 开始轮换图片
function startSwitchingImages() {
    switchInterval = setInterval(SwitchTextureImage, 1000); // 每 1 秒切换一次，可根据需求调整时间间隔
}

// 停止轮换图片
function stopSwitchingImages() {
    if (switchInterval !== undefined) {
        clearInterval(switchInterval);
        console.log('图片轮换已停止');
    }
}

// 切换纹理图片
function SwitchTextureImage() {
    currentImageIndex = (currentImageIndex + 1) % imageUrls.length;
    const newImageUrl = imageUrls[currentImageIndex];
    // const newImageUrl = imgTextures[currentImageIndex];

    if(currentImageIndex == imageUrls.length - 1){
        // stopSwitchingImages();
        currentImageIndex = 0;
    }else{
        // 如果新旧URL不同，则更新纹理
        if (newImageUrl !== currentImageUrl) {
            currentImageUrl = newImageUrl;
            console.log("Switching to image URL:", currentImageUrl);

            SwitchTextureFromImgURL(currentImageUrl, rectangleEntity);
            // SwitchPtimitiveImgFromImgURL(currentImageUrl, rectPrimitive);
        }
    }

    

    
}

// 初始化图片加载
initializeImages();



}


function SwitchPtimitiveImgFromImgURL(imagePath: string, primitive:Cesium.Primitive) {
    primitive.appearance.material = new Cesium.Material({
        fabric: {
            type: "Image",
            uniforms: {
                image: imagePath,
            },
        },
    });
}


function SwitchTextureFromImgURL(imgURL: string, rectangleEntity:Cesium.Entity) {
    const material = new Cesium.ImageMaterialProperty({
        image: imgURL,
        transparent: true
    });
    rectangleEntity.rectangle.material = material;
}


export function flyToAimPosition(viewer:Cesium.Viewer){
    // 设置相机视角位置
    const cameraLon = 113.343996;
    const cameraLat = 29.841242;
    const cameraHeight = 135000.0;
    const cameraPosition = Cesium.Cartesian3.fromDegrees(cameraLon, cameraLat, cameraHeight);

    // 设置相机视图
    viewer.camera.setView({
    destination: cameraPosition,
    orientation: {
        heading: Cesium.Math.toRadians(345),
        pitch: Cesium.Math.toRadians(-90),
        roll: 0
    }
    });
}
